<template>
  <el-card shadow="hover">
    <el-table border :data="data" class="table">
      <el-table-column v-for="tableColumn in filterSchema" v-bind="tableColumn">
        <template v-if="tableColumn.slot === 'operator'" #header>
          {{ tableColumn.label }}

          <el-popover placement="bottom" trigger="click" :visible="isShow">
            <template #reference>
              <el-icon size="14" @click="toggle">
                <ArrowUp v-if="isShow" /><ArrowDown v-else />
              </el-icon>
            </template>
            <el-checkbox-group v-model="columns">
              <draggable
                v-model="allSchema"
                tag="transition-group"
                item-key="id"
              >
                <template #item="{ element }">
                  <el-checkbox :label="element.label" />
                </template>
              </draggable>
            </el-checkbox-group>

            <el-button type="primary" size="small" @click="setColumns">
              确定
            </el-button>
            <el-button size="small" @click="resetColumns">取消</el-button>
          </el-popover>
        </template>
        <template v-slot="{ row, $index }">
          <slot
            v-if="tableColumn.slot"
            :name="tableColumn.slot"
            :row="row"
            :$index="$index"
          />
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="pagination"
      v-model:page-size="pageSize"
      v-model:currentPage="currentPage"
      :total="total"
      :page-sizes="[5, 10, 15, 20]"
      layout="prev, pager, next, sizes, -> ,jumper, total"
    ></el-pagination>
  </el-card>
</template>

<script lang="ts" setup>
defineOptions({
  name: "SchemaTable",
});

const props = withDefaults(
  defineProps<{
    pagination?: boolean;
    schema: any[];
    getData: Function;
  }>(),
  {
    pagination: true,
  }
);

// https://github.com/SortableJS/vue.draggable.next
// @ts-check
import draggable from "vuedraggable";

import { ArrowDown, ArrowUp } from "@element-plus/icons-vue";

import { watch, ref, computed } from "vue";

const currentPage = ref(1);
const pageSize = ref(5);
const total = ref(0);
const data = ref([]);

watch(
  [currentPage, pageSize],
  async () => {
    const res = await props.getData(currentPage.value, pageSize.value);
    total.value = res.total;
    data.value = res.data;
  },
  {
    immediate: true,
  }
);

const isShow = ref(false);
const toggle = () => {
  isShow.value = true;
};

const filterSchema = computed(() => {
  return updatedSchema.value.filter((item) =>
    updatedColumns.value.includes(item.label)
  );
});

// 正在修改的值
const columns = ref(props.schema.map((item) => item.label));
// 存储上一次
const updatedColumns = ref(props.schema.map((item) => item.label));

const allSchema = ref(props.schema);
const updatedSchema = ref(props.schema);

const setColumns = () => {
  updatedColumns.value = columns.value;
  updatedSchema.value = allSchema.value;
  isShow.value = false;
};

const resetColumns = () => {
  columns.value = updatedColumns.value;
  allSchema.value = updatedSchema.value;
  isShow.value = false;
};
</script>

<style scoped>
.table {
  margin-bottom: 20px;
}
</style>
